<template>
  <div class="sub">
    <template>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
         <el-table-column prop="" label="">
            <el-button type="primary" @click="dialogVisible = true" >提交验证</el-button>
            </el-table-column>
      </el-table>
      
  

<el-dialog
  title="验证"
  :visible.sync="dialogVisible"
  top="0"
  width="80%"
  :center="true"
  :before-close="handleClose">
  <Infoms/>
  <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="resetForm('ruleForm')">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </span> -->
</el-dialog>
    </template>
  </div>
</template>
<script>
import Infoms from '@/components/Infoms.vue'
export default {
  name: "Souson",
  components:{Infoms},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      dialogVisible: false,
    };
  },

    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    },
    //  submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
  
};
</script>
<style lang="less">
.sub {
  
  .spa {
    text-align: center;
    margin: 0 auto;
    line-height: 50px;
    display: block;
    width: 100px;
    height: 50px;
  }
  .mian {
    line-height: 50px;
  }
  
}.el-dialog__header{
  height: 68px;
  padding: 0;
 
}
.el-dialog--center{
  padding: 0;
  width: 80%;
  height: 650px;
  overflow: auto;
}
.el-dialog__body{
  height: 800px;
}
</style>